<template>
  <div class="setDialog" v-if="showSettingDialog">
    <mid-dialog-box :title="title" @closeMidDialog="toggleShowDialog">
      <div class="contentBox height_100 width_100">
        <div class="left">
          <ul class="navList">
            <li class="flex-start cp" v-for="item in leftNavList" :key="item.id">
              <img
                class="navimg"
                :src="
                  selectNavId === item.id ? item.selectedSrc : item.defaultSrc
                "
                alt=""
              />
              <span class="navtit">{{ item.name }}</span>
            </li>
          </ul>
        </div>
        <div class="right">
          <ul class="setList" v-if="selectNavId === 0">
            <li class="flex-start">
              <el-checkbox v-model="camera"></el-checkbox>
              <span class="setTit">开启摄像头</span>
            </li>
            <li class="flex-start">
              <el-checkbox v-model="voiced"></el-checkbox>
              <span class="setTit">开启麦克风</span>
            </li>
            <li class="flex-start">
              <el-checkbox v-model="durationOfAttendance"></el-checkbox>
              <span class="setTit">显示参会时长</span>
            </li>
          </ul>
        </div>
      </div>
    </mid-dialog-box>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: '设置',
      showSettingDialog: false,
      selectNavId: 0
    }
  },
  computed: {
    leftNavList () {
      return [
        {
          id: 0,
          name: '常规设置',
          selectedSrc: require('@/assets/cfRoom/images/setting.png'),
          defaultSrc: require('@/assets/cfRoom/images/normalset.png')
        }
      ]
    },
    // 打开摄像头
    camera: {
      get () {
        return this.$store.state.user.generalSettings.camera
      },
      set (val) {
        this.$store.commit('user/set_generalSettings_camera', val)
      }
    },
    // 打开麦克风
    voiced: {
      get () {
        return this.$store.state.user.generalSettings.voiced
      },
      set (val) {
        this.$store.commit('user/set_generalSettings_voiced', val)
      }
    },
    // 显示参会时长
    durationOfAttendance: {
      get () {
        return Boolean(this.$store.state.user.generalSettings.durationOfAttendance)
      },
      set (val) {
        this.$store.commit('user/set_generalSettings_durationOfAttendance', val)
      }
    }
  },
  methods: {
    toggleShowDialog () {
      this.showSettingDialog = !this.showSettingDialog
    }
  }
}
</script>

<style lang="scss" scoped>
.setDialog {
  .contentBox {
    overflow: hidden;
    .left {
      width: 183px;
      height: 100%;
      float: left;
      padding-top: 24px;
      // background-color: skyblue;
      border-right: 1px solid #ebedf3;
      ul.navList {
        li {
          padding-left: 30px;
          width: 178px;
          margin-left: 3px;
          height: 40px;
          opacity: 1;
          background: linear-gradient(316deg, #4a53ef, #6971fe 100%);
          .navimg {
            width: 18px;
            height: 18px;
          }
          .navtit {
            margin-left: 10px;
            height: 17px;
            opacity: 1;
            font-size: 12px;
            font-weight: 400;
            color: #ffffff;
            line-height: 17px;
            letter-spacing: 0px;
          }
        }
      }
    }
    .right {
      width: 577px;
      height: 100%;
      padding: 36px 32px;
      float: left;
      // background-color: plum;
      ul.setList{
        li{
          margin-bottom: 24px;
          .setTit{
            margin-left: 10px;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: #0D172C;
          }
        }
      }
    }
  }
}
</style>
